<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/myacode/pen/PoqQQNM</title>

    <link rel="stylesheet" href="./style.css">
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
</head>
<body>

<svg id="demo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="1600" height="900" viewBox="0 0 1600 900">
    <defs>
        <radialGradient id="maskGradient">
            <stop offset="50%" stop-color="#fff"/>
            <stop offset="100%" stop-color="#000"/>
        </radialGradient>
        <mask id="theMask">
            <circle id="masker" r="150" fill="url(#maskGradient)" cx="800" cy="450" />
        </mask>
    </defs>
    <image id="lines" xlink:href="./roomSketch.jpg" x="0" y="0" width="1600" height="900" />
    <g id="maskReveal" mask="url(#theMask)" >
        <image id="regular" xlink:href="./roomColor.jpg" x="0" y="0" width="1600" height="900" />
    </g>
    <circle id="ring" r="20" fill="none" stroke="#dc143c" stroke-width="2" cx="800" cy="450" />
    <circle id="dot" r="4" fill="#dc143c" cx="800" cy="450" />
</svg>

<div id="instructions">
    <svg id="dial" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
        <path id="progressRing" d="M50,10A40,40,0,1,1,10,50,40,40,0,0,1,50,10Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="6"/>
        <circle r="43" fill="none" stroke="#fff" cx="50" cy="50" stroke-width="2" opacity="0.5" />
        <circle r="37" fill="none" stroke="#fff" cx="50" cy="50" stroke-width="2" opacity="0.5"/>
        <text transform="translate(55 56)" text-anchor="start" font-size="20" fill="#fff">%</text>
        <text id="counter" transform="translate(55 56)" text-anchor="end" font-size="20" fill="#fff">0</text>
    </svg>
    <p>Hover mouse to move mask around.</p>
    <p>Hold &amp; release mouse button to expand &amp; contract mask.</p>
</div>

</body>
<script src="script.js" type="module"></script>
</html>